<template>
  <div id="detail_bar">
    <ul>
      <li>
          <div><img src="../../../assets/image/service.png"></div>客服
      </li>
      <li>
          <div><img src="../../../assets/image/dianpu.png"></div>店铺
      </li>
      <li>
          <div><img src="../../../assets/image/shoucang1.png"></div>收藏
      </li>
      <li>
          <div class="right_car" @click="addCart">加入购物车</div>
      </li>
      <li>
        <div class="right_shop">立即购买</div>
      </li>
    </ul>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {mapActions} from 'vuex';
export default {
  name: "DetailBottomBar",
  props:{
    //让父组件将商品的基本信息传递过来
    goodInfo:{
      type:Object
    }
  },
  methods:{
    ...mapActions([
      'addCartListItem'
      ]),
    addCart(){
      //1.获取商品信息，
      console.log(this.goodInfo);

      // this.$store.commit('addCartListItem',this.goodInfo);
      // this.$store.dispatch('addCartListItem',this.goodInfo)
      // .then((value)=>{
      //   console.log(value);
      // })
      //使用 映射 的方式,将action.js中的方法映射到该组件中
      this.addCartListItem(this.goodInfo)//使用actions来进行添加数据
        .then((value)=>{
          console.log(value);
          // this.$toast.show();
        })
      //当dispatch执行完毕后,会有一个
    }
  },
  computed:{
    ...mapGetters([//使用对象展开运算符,将getter混入到computed对象中
      "getCartLength",
      "getCartList"
    ])
  }
}
</script>

<style scoped>
#detail_bar{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: pink;
  z-index: 9999;
}
#detail_bar ul{
  list-style: none;
  display: flex;
  text-align: center;
}
#detail_bar ul li{
  flex: 1;
  font-size: 15px;
}
#detail_bar ul li {
  display: block;
}
#detail_bar ul li  div img{
  width: 25px;
  height: 25px;
  margin-top: 3px;
}
#detail_bar ul li .right_car , #detail_bar ul li .right_shop {
  background: #cccccc;
  width: 110px;
  height: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
}
#detail_bar ul li .right_car{
  background: yellow;
}
#detail_bar ul li .right_shop{
  background: red;
}
</style>
